<template>
  <div>
    <p>1. 获取原生DOM元素</p>
    <h1 ref="myH" id="h">h1标签</h1>
    <p>2. 获取组件对象 - 可调用组件内一切</p>
    <demo ref="de"></demo>
    <p>3. vue更新dom是异步的</p>
    <p ref="myP">{{ count }}</p>
    <button @click="btn">点击count+1，马上提取p标签内容</button>
  </div>
</template>

<script>
import Demo from "./child/Demo";
export default {
  components: { Demo },
  data() {
    return {
      count: 0,
    };
  },
  methods: {
    btn() {
      this.count++; // vue监测数据更新，开启一个dom更新队列（异步任务）
      //   console.log(this.$refs.myP.innerHTML);

      //   原因：vue更新DOM异步
      // 解决：this.$nextTick()
      // 过程：DOM更新完全会挨个触发$nextTick里的函数体
      this.$nextTick(() => {
        console.log(this.$refs.myP.innerHTML);
      });
    },
  },
  mounted() {
    console.log(document.getElementById("h"));
    console.log(this.$refs.myH);

    let demoObj = this.$refs.de;
    demoObj.fn();
  },
};
</script>

<style>
</style>